<template>
  <div>
    <li class="approvalGroup_item">
      <div class="approvalGroup_itemIcon">
        <img :src="activeIconSrc(record.icon)" />
      </div>
      <div class="approvalGroup_itemLeft">
        <div class="approvalGroup_itemNameWrapper">
          <div class="approvalGroup_itemName">
            <span>{{ record.name || '未知' }}</span>
          </div>
        </div>
        <div class="approvalGroup_itemIntro">{{ getTypeText(record.type) || '未知' }}</div>
      </div>
      <div class="approvalGroup_itemSeeable">
        <el-tag type="success" v-if="record.state == 1">启用</el-tag>
        <el-tag type="danger" v-if="record.state == 0">停用</el-tag>
      </div>
      <div class="approvalGroup_itemOperations">
        <el-tooltip content="编辑" placement="top" effect="dark">
          <a-icon type="edit" class="action_btn" @click="goDetails" />
        </el-tooltip>
        <el-tooltip content="停用" placement="top" effect="dark" v-if="record.state == 1">
          <a-icon type="stop" class="action_btn" @click="disableRecord(0)" />
        </el-tooltip>
        <el-tooltip content="启用" placement="top" effect="dark" v-if="record.state == 0">
          <a-icon
            type="check-circle"
            theme="twoTone"
            two-tone-color="#52c41a"
            class="action_btn"
            @click="disableRecord(1)"
          />
        </el-tooltip>
        <el-tooltip content="删除" placement="top" effect="dark" v-if="isCanDelete">
          <a-icon type="delete" class="action_btn_del" @click="delRecord" />
        </el-tooltip>
      </div>
    </li>
  </div>
</template>

<script>
  import { startOrStop, approvedel } from '@/pages/views/approval/service'
  export default {
    name: 'ApprovalItem',
    props: {
      record: Object,
      recordIndex: Number,
      isCanDelete: Boolean
    },
    data() {
      const req = require.context('@/assets/approverIcon', false, /\.png$/)
      const iconList = req.keys().map((t, idx) => ({ src: req(t), id: idx }))
      return {
        iconList
      }
    },
    methods: {
      async delRecord() {
        const res = await approvedel({ esApproveId: this.record.id })
        if (res.code !== 200) return this.$message.error(res.message)
        this.$message.success('删除成功！')
        this.$emit('delSuccess', this.recordIndex)
      },
      async disableRecord(type) {
        const res = await startOrStop({ esApproveId: this.record.id, state: type })
        if (res.code !== 200) return this.$message.error(res.message)
        this.record.state = type
      },
      goDetails() {
        this.$router.push({
          path: '/approver',
          query: {
            id: this.record.id,
            isCanEdit: this.isCanDelete
          }
        })
      },
      activeIconSrc(iconId) {
        const icon = this.iconList.find(t => t.id === Number(iconId))
        return icon ? icon.src : ''
      },
      getTypeText(type) {
        switch (Number(type)) {
          case 1:
            return '通用审批流程'
          case 2:
            return '自定义审批流程'
          default:
            return ''
        }
      },
      getStateText(type) {
        switch (Number(type)) {
          case 0:
            return '停用'
          case 1:
            return '启用'
          default:
            return ''
        }
      }
    },
    computed: {}
  }
</script>

<style lang="stylus" scoped>
  .approvalGroup_item:hover{
      background-color #eee
  }
  .approvalGroup_item {
      background rgba(255,255,255,.5)
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20px;
      cursor pointer;
      .approvalGroup_itemIcon {
          flex-shrink: 0;
          margin-right: 8px;
          height: 42px;
          width: 42px;
          border-radius: 50%;
          overflow: hidden;
          background-color: #ccc;
          img {
              width 100%;
              height 100%;
          }
      }
      .approvalGroup_itemLeft {
          width: 420px;
          flex-shrink: 0;
          .approvalGroup_itemNameWrapper {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 5px;
          }
      }
      .approvalGroup_itemIntro {
          width: 420px;
          line-height: 17px;
          color: #8f959e;
      }
      .approvalGroup_itemIntro, .approvalGroup_itemSeeable {
          font-size: 14px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
      .approvalGroup_itemSeeable {
          flex-grow: 1;
          padding-left: 10px;
          padding-right: 20px;
          color: #1f2329;
      }
      .approvalGroup_itemOperations {
          flex-shrink: 0;
          display: flex;
      }
  }
  .action_btn{
      margin-left 10px;
      font-size: 20px;
  }
  .action_btn:hover{
      color #2baee9;
  }
  .action_btn_del{
      margin-left 10px;
      font-size: 20px;
  }
  .action_btn_del:hover{
      color #ff5653;
  }
</style>
